/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-06-25 15:04:01
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-07 17:01:05
 * @FilePath: \cxl-h5\src\utils\chart\lineChart.ts
 */
import BaseChart from './baseChart'

export default class LineChart extends BaseChart {
    //钱
    xAxis: number[] = []
    count: number[] = []
    //X轴最大的金额
    maxMoney = 0
    //年
    yAxis: number[] = []
    marginBottom = this.calculateRatio(50)
    marginTop = this.calculateRatio(50)
    marginRight = this.calculateRatio(10)
    marginLeft = this.calculateRatio(60)
    textmarginLeft = this.calculateRatio(50)
    viewHeight = this.w_Height - this.marginTop - this.marginBottom
    viewWidth = this.w_Width - this.marginLeft - this.marginRight
    moveX = 0
    //定时器
    timer = 0
    //文字大小
    fontSize = 12
    constructor(eleName: string, xAxis: number[], count: number[], yAxis: number[]) {
        super(eleName)
        this.xAxis = xAxis
        this.yAxis = yAxis
        this.count = count
        this.maxMoney = Math.max(...this.xAxis)

        this.drawMoney()
        this.drawYear()
        this.fillAxisText('金额（元）', this.marginLeft / 2, this.calculateRatio(30))
        this.fillAxisText('年份', this.marginLeft * 0.8, this.w_Height - this.marginTop + this.calculateRatio(20))
        this.animate()
    }
    drawMoney() {
        //绘制Y轴 水平线
        for (let i = 0; i <= 5; i++) {
            this.ctx.save()
            this.ctx.translate(0, this.w_Height)
            this.ctx.beginPath()
            this.ctx.fillStyle = '#000000'
            this.ctx.textAlign = 'right'
            this.ctx.textBaseline = 'middle'
            this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
            this.ctx.fillText(
                (this.maxMoney / 5) * i + '',
                this.textmarginLeft,
                -this.marginBottom - (this.viewHeight / 5) * i
            )
            this.ctx.closePath()

            this.ctx.beginPath()
            this.ctx.moveTo(this.marginLeft, -this.marginBottom - (this.viewHeight / 5) * i)
            this.ctx.lineTo(this.w_Width - this.marginRight, -this.marginBottom - (this.viewHeight / 5) * i)
            this.ctx.stroke()
            this.ctx.closePath()

            this.ctx.restore()
        }
    }
    drawYear() {
        //绘制X轴
        for (let i = 0; i < this.yAxis.length; i++) {
            this.ctx.save()
            this.ctx.translate(0, this.w_Height)
            this.ctx.beginPath()
            this.ctx.fillStyle = '#000000'
            this.ctx.textAlign = 'center'
            this.ctx.textBaseline = 'middle'
            this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
            this.ctx.fillText(
                this.yAxis[i] + '',
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginTop + this.calculateRatio(20)
            )
            this.ctx.closePath()

            this.ctx.restore()
        }
    }
    drawLine() {
        //绘制折线
        this.ctx.save()
        this.ctx.translate(0, this.w_Height)
        this.ctx.beginPath()
        this.ctx.lineWidth = this.calculateRatio(2)
        this.ctx.lineJoin = 'round'
        this.ctx.strokeStyle = '#0866E6'
        const my_gradient = this.ctx.createLinearGradient(0, -this.w_Height / 3, 0, -this.w_Height)
        my_gradient.addColorStop(0, 'rgba(8, 102, 230,0)')
        my_gradient.addColorStop(1, 'rgba(8, 102, 230, 0.5)')
        this.ctx.fillStyle = my_gradient
        this.ctx.moveTo(
            this.marginLeft + this.viewWidth / this.yAxis.length / 2,
            -this.marginBottom - (this.xAxis[0] * this.viewHeight) / this.maxMoney
        )

        for (let i = 1; i < this.yAxis.length; i++) {
            this.ctx.lineTo(
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginBottom - (this.xAxis[i] * this.viewHeight) / this.maxMoney
            )
        }

        this.ctx.stroke()
        this.ctx.lineTo(
            this.marginLeft +
                this.viewWidth / this.yAxis.length / 2 +
                (this.viewWidth / this.yAxis.length) * (this.yAxis.length - 1),
            -this.marginTop
        )
        this.ctx.lineTo(this.marginLeft + this.viewWidth / this.yAxis.length / 2, -this.marginTop)
        this.ctx.fill()
        this.ctx.closePath()
        this.ctx.restore()
    }
    fillAxisText(text: string, x: number, y: number) {
        this.ctx.beginPath()
        this.ctx.fillStyle = '#999999'
        this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
        this.ctx.textAlign = 'center'
        this.ctx.fillText(text, x, y)
        this.ctx.fill()
        this.ctx.closePath()
    }
    //绘制数据年份的数据
    fillMoneyText(i: number) {
        this.ctx.beginPath()
        this.ctx.fillStyle = '#0866E6'
        this.ctx.font = this.calculateRatio(this.fontSize) + 'px Microsoft YaHei'
        this.ctx.textAlign = 'center'
        const y = i == this.xAxis.length - 1 ? this.calculateRatio(-10) : this.calculateRatio(20)
        if (this.xAxis[i] > 0) {
            this.ctx.fillText(
                `≈${this.xAxis[i]}（${this.count[i]}个）`,
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i + y,
                -this.marginBottom - (this.xAxis[i] * this.viewHeight) / this.maxMoney - this.calculateRatio(10)
            )
            this.ctx.fill()
        }
        this.ctx.closePath()
    }
    //绘制数据年份的点
    drawPoint() {
        this.ctx.save()
        this.ctx.translate(0, this.w_Height)
        this.ctx.fillStyle = '#ffffff'
        this.ctx.strokeStyle = '#0866E6'
        this.ctx.lineWidth = this.calculateRatio(2)
        this.ctx.beginPath()
        this.ctx.arc(
            this.marginLeft + this.viewWidth / this.yAxis.length / 2,
            -this.marginBottom - (this.xAxis[0] * this.viewHeight) / this.maxMoney,
            this.calculateRatio(3),
            0,
            Math.PI * 2
        )
        this.ctx.fill()
        this.ctx.stroke()
        this.ctx.closePath()

        this.fillMoneyText(0)
        for (let i = 1; i < this.yAxis.length; i++) {
            this.ctx.beginPath()
            this.ctx.fillStyle = '#ffffff'
            this.ctx.strokeStyle = '#0866E6'
            this.ctx.lineWidth = this.calculateRatio(2)
            this.ctx.arc(
                this.marginLeft + this.viewWidth / this.yAxis.length / 2 + (this.viewWidth / this.yAxis.length) * i,
                -this.marginBottom - (this.xAxis[i] * this.viewHeight) / this.maxMoney,
                this.calculateRatio(5),
                0,
                Math.PI * 2
            )
            this.ctx.fill()
            this.ctx.stroke()
            this.ctx.closePath()
            this.fillMoneyText(i)
        }

        this.ctx.restore()
    }
    animate = () => {
        this.timer = window.requestAnimationFrame(this.animate)

        this.ctx.save()
        this.ctx.clearRect(0, 0, this.w_Width, this.w_Height)
        this.drawMoney()
        this.drawYear()
        this.fillAxisText('金额（元）', this.marginLeft / 2, this.calculateRatio(30))
        this.fillAxisText('年份', this.marginLeft * 0.8, this.w_Height - this.marginTop + this.calculateRatio(20))
        this.ctx.beginPath()
        this.ctx.rect(this.marginLeft, 0, this.moveX, this.w_Height)

        this.ctx.clip()
        this.ctx.closePath()
        this.drawLine()
        this.drawPoint()
        this.ctx.restore()

        if (this.moveX >= this.viewWidth) {
            window.cancelAnimationFrame(this.timer)
        } else {
            this.moveX += 8
        }
    }
}
